html, body {padding: 0px; border: 0px; left: 0px; margin-top: 0px; background-color: rgb(216, 191, 216);

*{
text-decoration: none;
}

.page_container {
width: 100%;
max-width: 1500px; 
margin: 0 auto;     
padding: 0 20px;   
box-sizing: border-box;
}

.header_container{
max-width: 1500px; 
margin: 0 auto;
width: 100%;
}

.row {
display: flex;
justify-content: center;
align-items: stretch;
height: auto;
}

.header_content_one_column_1{
background-color: rgba(0, 0, 0, 0);
color: rgb(128, 0, 128);
width: 70%;
padding-right: 0px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
font-size: clamp(1.5rem, 2.5vw, 2.5rem);
float: left;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
}

@media screen and (min-width: 1500px) {
  .header_content_one_column_1 {
    font-size: 2.5rem;
  }
}

.header_content_one_column_1 > p{
font-size: clamp(1rem, 2vw, 2rem);
margin-top: -5%;
}

@media screen and (max-width: 630px) {
  .header_content_one_column_1 {
    font-size: 0.85rem;
  }

  .header_content_one_column_1 > p {
    font-size: 0.85rem;
  }
}

.header_content_one_column_2{
background-color: rgba(0, 0, 0, 0);
width: 30%;
padding-right: 0px;
padding-left: 0px;
padding-top: 0x;
padding-bottom: 0px;
text-align: center;
font-size: 18px;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
}

.header_content_one_column_2 > img {
height: 80%;
width: 80%;
object-fit: contain;
text-align: center;
}

.navbar {
overflow: hidden;
background-color: #1e140a;
display: flex;
}

@media screen and (max-width: 1200px) {
.navbar {
overflow: hidden;
background-color: #1e140a;
justify-content: center;
display: flex;
}
}

@media screen and (max-width: 1200px) {
.navbar-content {
  display: flex;
  align-items: center;
  gap: 10px; /* Optional: add spacing between items */
}
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;  
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color:rgb(128, 0, 128);
}

.dropdown-content {
display: none;
position: absolute;
background-color:rgb(147, 197, 114);
min-width: 160px;
z-index: 1;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: rgb(170, 255, 0);
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 630px) {
.navbar {
display: none;
}
}

.menu-container {
display:none;
}

.menu_content_button {
padding: 10px;  
display: block;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

.hamburger {
display:none;
}

.menu {
display:none;
}

.menu a {
display:none;
}

@media screen and (max-width: 630px) {
.menu-container {
display: block;
  background-color: #1e140a;
}
}

@media screen and (max-width: 630px) {
.menu_content {
display: block;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
}

@media screen and (max-width: 630px) {
.menu {
  display: none;
  flex-direction: column;
  background-color: #1e140a;
}
}

@media screen and (max-width: 630px) {
.menu a {
display: block;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
}
}

@media screen and (max-width: 630px) {
.menu a:hover {
  background-color: rgb(128, 0, 128);
}
}

.menu_dropdown {
float: left;
overflow: hidden;
}

.menu_dropdown .menu_dropbtn {
font-size: 16px;  
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.menu_dropdown:hover .menu_dropbtn {
background-color:rgb(128, 0, 128);
}

.menu_dropdown-content {
display: none;
position: absolute;
background-color:rgb(147, 197, 114);
min-width: 160px;
z-index: 1;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.menu_dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.menu_dropdown-content a:hover {
background-color: rgb(170, 255, 0);
}

.menu_dropdown:hover .menu_dropdown-content {
display: block;
}

.colour_band{
padding: 30px;
background-color: #7a4988;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.media_content{
height: auto;
padding: 30px;
background: #f1e5f3;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.row {
display: flex;
justify-content: center;
align-items: stretch;
height: auto;
}

.text_cover_media{
background-color: rgb(216, 191, 216);
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 18px;
float; right;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.media_content_column_1{
background-color: #C8A2C9;
width: 30%;
padding-right: 5px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
font-size: 18px;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
}

.media_content_column_1 > img {
height:100%;
width:100%;
object-fit: contain;
text-align: center;
}

.media_content_column_2{
background-color: #C8A2C9;
width: 70%;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 18px;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
}

.media_content_compartments{
height: auto;
padding: 30px;
background: rgb(170, 152, 169);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.compartment_media {
background-color: rgb(216, 191, 216);
color: black;
cursor: pointer;
padding: 20px;
width: 100%;
border: none;
font-size: 28px;
text-align: center;
font-family: times new roman;
}

.active, .compartment_media:hover {
  background-color:rgb(128, 0, 128);
}

.content_media {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1e5f3;
text-align: center;
}

.records_content_compartment{
height: auto;
padding: 30px;
background: #ee6b6e;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.End_content{
height: auto;
padding: 30px;
background: #f1e5f3;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.row {
display: flex;
justify-content: center;
align-items: stretch;
height: auto;
}

.End_content_column_1{
background-color: rgb(170, 152, 169);
width: 24%;
text-align: center;
font-size: 16px;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
}

.End_content_column_2{
background-color: rgb(216, 191, 216);
width: 24%;
text-align: center;
font-size: 16px;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
}

.End_content_column_3{
background-color: rgb(170, 152, 169);
width: 24%;
text-align: center;
font-size: 16px;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
}

.End_content_column_4{
background-color: rgb(216, 191, 216);
width: 24%;
text-align: center;
font-size: 16px;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
}

.End_content_column_1:hover {
background-color: rgb(128, 0, 128);
color: white;
cursor: pointer;
}

.End_content_column_2:hover {
background-color: rgb(128, 0, 128);
color: white;
cursor: pointer;
}

.End_content_column_3:hover {
background-color: rgb(128, 0, 128);
color: white;
cursor: pointer;
}

.End_content_column_4:hover {
background-color: rgb(128, 0, 128);
color: white;
cursor: pointer;
text-decoration: none;
color: white;
}

.End_content_column_1 a {
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: black;
}

.End_content_column_2 a {
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: black;
}

.End_content_column_3 a {
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: black;
}

.End_content_column_4 a {
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: black;
}

.End_content_column_1 a:hover {
color: white;
cursor: pointer;
}

.End_content_column_2 a:hover {
color: white;
cursor: pointer;
}

.End_content_column_3 a:hover {
color: white;
cursor: pointer;
}

.End_content_column_4 a:hover {
color: white;
cursor: pointer;
}




.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* spacing between thumbnails */
  justify-content: center;
}

.youtube-thumbnail {
  position: relative;      
  flex: 1 1 300px;         
  max-width: 560px;        
  aspect-ratio: 16 / 9;    
  background-size: cover;
  background-position: center;
  cursor: pointer;
  margin-bottom: 1em;
}

.youtube-thumbnail iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 16px;
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
  font-family: Arial, sans-serif;
  cursor: pointer;
}



.youtube-thumbnail:hover .play-button {
  background-color: white;   /* black box becomes white */
  color: black;              /* PLAY text becomes black */
  /* No transition here */
}

.play-button {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  /* Remove transition here as well */
}







.end{
padding: 10px;
background-color: rgb(128, 0, 128);
color: black;
font-size: 15px;
margin-bottom: -8px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}